<template>
    <div class="charge-system">
        <div class="operation">
            <el-form
                :inline="true"
                :model="form"
                label-width="80px"
                class="formList"
            >
                <el-form-item label="选择区域">
                    <dx-cascader :area_id.sync="form.areaId" />
                </el-form-item>
                <el-form-item label="账期">
                    <el-date-picker
                        v-model="form.month"
                        value-format="yyyyMM"
                        type="month"
                        placeholder="选择月"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item label="是否税后" style="width: 40%;">
                    <el-switch v-model="form.isAfterTax"> </el-switch>
                    <el-checkbox size="mini"  v-model="form.isHb">是否环比</el-checkbox>
                    <el-button
                        size="small"
                        type="primary"
                        style="margin-left: 12px"
                        @click="submitHandle()"
                        >查询</el-button
                    >
                    <el-button size="small" type="orange" @click="handle_export()"
                        >导出</el-button
                    >
                    <el-button
                        size="small"
                        type="orange"
                        @click="handle_export('all')"
                        >批量导出</el-button
                    >
                </el-form-item>
            </el-form>
            <p class="g-unit">单位: 万元</p>
            <div class="tableBox">
                <el-table
                    border
                    stripe
                    v-loading="tableLoading"
                    :data="tableData"
                    style="width:100%"
                    class="tableTh28"
                    height="73vh"
                    
                    ref="table"
                >
                    <el-table-column
                        fixed
                        prop="dataSourceName"
                        label="收入来源"
                        width="80px"
                        show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                        fixed
                        prop="class1"
                        label="收入项"
                        width="80px"
                    ></el-table-column>
                    <el-table-column
                        fixed
                        prop="class2"
                        label="收入面"
                        width="100px"
                    ></el-table-column>
                    <el-table-column
                        fixed
                        prop="indexname"
                        label="产品项"
                        min-width="140"
                        show-overflow-tooltip
                    >
                    </el-table-column>
                    <!-- <el-table-column fixed prop="total" label="月账" width="100px"></el-table-column> -->
                    <el-table-column
                        v-for="(it, i) in titles"
                        :key="i"
                        :prop="it.value"
                        :label="it.label + '号 (' + it.week + ')'"
                         min-width="100"
                    >
                    </el-table-column>
                </el-table>
                <div class="page-wrapper" v-if="tableData.length">
                    <span class="totalNum">共{{totalNum}}条</span>
                    <el-pagination
                        layout="prev, pager, next"
                        :page-sizes="[20, 50, 100]"
                        @size-change="sizeChange"
                        :page-size="pageSize"
                        :total="dataTotal"
                        :current-page.sync="currentPage"
                        @current-change="handleCurrentChange"
                    ></el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { $budgetAPI } from "@/api";
import { getSessionStorage } from "@/common/js/storage";
import { getCookie } from "@/common/js/cookie";
import { createSpanCharge, mergeSpan } from "@/utils/mixin";
import { getMonthDays, getWeek} from '@/utils/common'
import prefixAPI from "@/api/prefixAPI";


export default {
    name: 'Bill-tab1',
    data() {
        return {
            titleName: [],
            tableLoading: false,
            form: {
                areaId: "",
                month: "",
                isAfterTax: true,
                isHb: false
            },
            tableData: [],
            colList: [],
            titles: [],
            colnumName: [],
            page: 1,
            pageSize: 50,
            currentPage: 1,
            dataTotal: 0,
            totalNum: '',
        };
    },
    created() {
        
    },
    methods: {
        init() {
            this.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
            this.form.areaId = this.accountInfo.areaId;
            // this.submitHandle();
            this.getMaxAcctMonthByDailyAccount();
        },
        //页码改变
        sizeChange(val) {
            this.pageSize = val;
            this.submitHandle();
        },
         //翻页操作
        handleCurrentChange(page) {
            this.currentPage = page;
            this.submitHandle();
        },
        submitHandle() {
            var that = this,
                areaId = this.form.areaId,
                acctMonth = this.form.month,
                isAfterTax = this.form.isAfterTax,
                isHb = this.form.isHb,
                year = that.form.month.substr(0, 4),
                month = that.form.month.substr(4, 2),
                count = getMonthDays(year, month);


            that.tableLoading = !0;
            that.tableData = [];
            that.titles = Array.from(new Array(count), (it, i) => {
                      var index = ((i+ 1) < 10 ? "0" + (i + 1) : i + 1)
                      return {
                            value:  isHb ? "hb_" + index  : "real_" + index ,
                            label: (i + 1) + '',
                            week: getWeek(year + '-' + month + '-' + index)
                      };
                  })
            $budgetAPI.dailyGetList4(
                {
                    areaId,
                    acctMonth,
                    isAfterTax,
                    isHb,
                    page: this.currentPage
                },
                res => {
                    this.tableLoading = false;
                    if (res.code == 0) {
                        // res.content.dataList.map((item, index) => {
                        //     for (let i = 0; i < 31; i++) {
                        //         item["data" + i] = item.data[2 * i];
                        //         item[i + "increase"] = item.data[2 * i + 1];
                        //     }
                        // });
                        // res.content.colList.map(it => {
                        //     it['week'] = this.getWeek(it.colnumCode.substr(0, 4) + '-' + it.colnumCode.substr(4, 2) + '-' + it.colnumCode.substr(-2))
                        // })
                        // this.colList = res.content.colList;
                        // // let result = this.createTableData(res.content.dataList);
                        // this.tableData = res.content.dataList;
                        // // this.spanArr = createSpanCharge(result,['incomeName','projectName','isProjectName','productName']);
                        // this.spanArr = mergeSpan(this.tableData, [
                        //     "dataSource",
                        //     "class1",
                        //     "class2",
                        //     "indexName"
                        // ]);
                        // setTimeout(() => {
                        //     this.$refs.table.doLayout();
                        // }, 1200);

                        that.tableData = res.content.items;
                        that.dataTotal =  250;
                        that.totalNum = res.content.totalNum;
                        that.$nextTick(() => {
                            that.$refs.table.doLayout();
                        });
                    }
                },
                err => {
                    this.tableLoading = false;
                }
            );
        },
        // 生成tableData数据
        createTableData(dataArr) {
            let result = dataArr.map((item, index) => {
                return { ...item, ...item.data };
            });
            return result;
        },
        arraySpanMethod({ row, column, rowIndex, columnIndex }) {
            if (
                columnIndex == 0 ||
                columnIndex == 1 ||
                columnIndex == 2 ||
                columnIndex == 3
            ) {
                return this.spanArr[rowIndex][columnIndex];
            }
        },
        handle_export(type) {
            let areaId = this.form.areaId,
                accMonth = this.form.month,
                isAfterTax = this.form.isAfterTax,
                isHb = this.form.isHb,
                url = type ? '/api/dailyOutAccount/exportBatch' : '/api/dailyOutAccount/export',
                token = getCookie("token");

            window.location.href =
                    prefixAPI.hp + url + 
                    "?areaId=" +
                    areaId +
                    "&acctMonth=" +
                    accMonth +
                    "&isAfterTax=" +
                    isAfterTax +
                    '&isHb=' + 
                    isHb +
                    "&token=" +
                    token;
            // if (process.env.NODE_ENV == "development") {
            //     window.location.href =
            //         prefixAPI.loc +
            //         "/api/dailyAccountThree/export?areaId=" +
            //         areaId +
            //         "&accMonth=" +
            //         accMonth +
            //         "&isAfterTax=" +
            //         isAfterTax +
            //         "&token=" +
            //         token;
            // } else if (process.env.NODE_ENV == "production") {
            //     window.location.href =
            //         prefixAPI.hp +
            //         "/api/dailyAccountThree/export?areaId=" +
            //         areaId +
            //         "&accMonth=" +
            //         accMonth +
            //         "&isAfterTax=" +
            //         isAfterTax +
            //         "&token=" +
            //         token;
            // }
        },
        plExportExcel() {
            let areaId = this.form.areaId
                ? this.form.areaId
                : this.accountInfo.areaId;
            let isAfterTax = this.form.isAfterTax;
            let accMonth = this.form.month
                ? this.form.month
                : this.accountInfo.month;
            let token = getCookie("token");
            if (process.env.NODE_ENV == "development") {
                window.location.href =
                    prefixAPI.loc +
                    "/api/dailyAccountThree/exportBatch?areaId=" +
                    areaId +
                    "&accMonth=" +
                    accMonth +
                    "&isAfterTax=" +
                    isAfterTax +
                    "&token=" +
                    token;
            } else if (process.env.NODE_ENV == "production") {
                window.location.href =
                    prefixAPI.hp +
                    "/api/dailyAccountThree/exportBatch?areaId=" +
                    areaId +
                    "&accMonth=" +
                    accMonth +
                    "&isAfterTax=" +
                    isAfterTax +
                    "&token=" +
                    token;
            }
        },
        getMaxAcctMonthByDailyAccount() {
            let areaId = this.form.areaId;
            $budgetAPI.getMaxAcctMonthByDailyAccount3(
                {
                    areaId
                },
                res => {
                    if (res && res.code == 0) {
                        this.form.month = res.content;
                        this.submitHandle();
                    }
                },
                err => {}
            );
        },
    }
};
</script>

<style lang="scss" scoped>
.page-wrapper {
    display: flex ;
    align-items: center;
    text-align: right;
    justify-content: flex-end;
    padding: 15px 0;
    .totalNum {
        color: #999;
    }
}
.charge-system {
    .daochu {
        .el-form-item__content {
            float: right;
            width: 100%;
        }
    }
}
</style>
